<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理定区/调度排班</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="../../css/default.css">
<script type="text/javascript"
	src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="../../js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="../../js/easyui/ext/jquery.cookie.js"></script>
<script src="../../js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<script type="text/javascript">
	//表单数据转json工具
	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	};
	function doAdd() {
		$('#addWindow').window("open");
	}

	function doEdit() {
		alert("修改...");
	}

	function doDelete() {
		var rows = $("#grid").datagrid("getSelections");
		if(rows.length!=0) {
			$.messager.confirm('提示','确定要删除吗？',function(r){
				if(r) {
					var array = new Array();
					for(var i=0;i<rows.length;i++) {
						array.push(rows[i].id);
					}
					var ids = array.join(',');
					window.location.href="../../fixedArea_delete.action?ids="+ids;
				}
			});
		} else {
			$.messager.alert('错误','删除必须选中一行或多行！','error')
		}
	}

	function doSearch() {
		$('#searchWindow').window("open");
	}

	//关联客户窗口弹出
	function doAssociations() {
		var rows = $("#grid").datagrid("getSelections");
		if (rows.length == 1) {
			$('#customerWindow').window('open');
			//把勾选的id存到form隐藏域
			$("#customerFixedAreaId").val(rows[0].id);
			//发送异步请求 显示未关联和关联
			$.post('../../fixedArea_findNoAssociationCustomers.action',
				function(data) {
				$("#noassociationSelect").empty();
				//查询所有未关联定区客户列表
					$(data).each(function() {
						var option = $("<option value='"+this.id+"'>"
								+ this.username
								+ "("
								+ this.address
								+ ")" + "</option>");
						$("#noassociationSelect")
								.append(option);
					});
			});
			$.post('../../fixedArea_findHasAssociationCustomers.action', {
				"id" : rows[0].id
			}, function(data) {
				$("#associationSelect").empty();
				//查询所有选中当前定区关联客户列表
				$(data).each(
					function() {
						var option = $("<option value='"+this.id+"'>"
								+ this.username + "(" + this.address + ")"
								+ "</option>");
						$("#associationSelect").append(option);
					});
			});
		} else {
			$.messager.alert('警告', '关联客户只能选择一行！', 'warning');
		}
	}

	//工具栏
	var toolbar = [ {
		id : 'button-search',
		text : '查询',
		iconCls : 'icon-search',
		handler : doSearch
	}, {
		id : 'button-add',
		text : '增加',
		iconCls : 'icon-add',
		handler : doAdd
	}, {
		id : 'button-edit',
		text : '修改',
		iconCls : 'icon-edit',
		handler : doEdit
	}, {
		id : 'button-delete',
		text : '删除',
		iconCls : 'icon-cancel',
		handler : doDelete
	}, {
		id : 'button-association',
		text : '关联客户',
		iconCls : 'icon-sum',
		handler : doAssociations
	}, {
		id : 'button-association-courier',
		text : '关联快递员',
		iconCls : 'icon-sum',
		handler : function() {
			// 判断是否已经选中了一个定区，弹出关联快递员窗口 
			var rows = $("#grid").datagrid('getSelections');
			if (rows.length == 1) {
				// 只选择了一个定区
				// 弹出定区关联快递员 窗口 
				$("#courierWindow").window('open');
				//保存选中定区id到表单隐藏域
				$("#courierFixedAreaId").val(rows[0].id);
				
			} else {
				// 没有选中定区，或者选择 了多个定区
				$.messager.alert("警告", "关联快递员,只能（必须）选择一个定区", "warning");
			}
		}
	} ];
	// 定义列
	var columns = [ [ {
		field : 'id',
		title : '编号',
		width : 80,
		align : 'center',
		checkbox : true
	}, {
		field : 'fixedAreaNum',
		title : '定区编号',
		width : 120,
		align : 'center',
		formatter : function(value, row, index) {
			return row.id;
		}
	}, {
		field : 'fixedAreaName',
		title : '定区名称',
		width : 120,
		align : 'center'
	}, {
		field : 'fixedAreaLeader',
		title : '负责人',
		width : 120,
		align : 'center'
	}, {
		field : 'telephone',
		title : '联系电话',
		width : 120,
		align : 'center'
	}, {
		field : 'company',
		title : '所属公司',
		width : 120,
		align : 'center'
	} ] ];

	$(function() {
		// 先将body隐藏，再显示，不会出现页面刷新效果
		$("body").css({
			visibility : "visible"
		});

		// 定区数据表格
		$('#grid').datagrid({
			iconCls : 'icon-forward',
			fit : true,
			border : true,
			rownumbers : true,
			striped : true,
			pageList : [ 30, 50, 100 ],
			pagination : true,
			toolbar : toolbar,
			url : "../../fixedArea_pageQuery.action",
			idField : 'id',
			columns : columns,
			onDblClickRow : doDblClickRow
		});

		// 添加、修改定区
		$('#addWindow').window({
			title : '添加修改定区',
			width : 600,
			modal : true,
			shadow : true,
			closed : true,
			height : 400,
			resizable : false
		});

		// 查询定区
		$('#searchWindow').window({
			title : '查询定区',
			width : 400,
			modal : true,
			shadow : true,
			closed : true,
			height : 400,
			resizable : false
		});
		$("#btn").click(function() {

		});

		//save按钮点击事件
		$("#save").click(function() {
			if ($("#fixedAreaForm").form("validate")) {
				$("#fixedAreaForm").submit();
			} else {
				$.messager.alert('警告', '保单存在非法数据！', 'waring');
			}
		});

		//查询按钮
		$("#btn").click(function() {
			var params = $("#searchFixedAreaForm").serializeObject();
			$("#grid").datagrid('load', params);
			$("#searchWindow").window("close");
		});

		//关联到右边
		$("#toRight").click(function() {
			$("#associationSelect").append($("#noassociationSelect option:selected"));
		});
		//移到左边
		$("#toLeft").click(function() {
			$("#noassociationSelect").append($("#associationSelect option:selected"));
		});
		
		//点击关联的按钮事件
		$("#associationBtn").click(function(){
			//因为默认是只提交被选中的，所以提交之前先做一个操作
			//选中所有已关联的选项
			$("#associationSelect option").attr("selected","selected");
			$("#customerForm").submit();
		});
		
		//关联快递员提交
		$("#associationCourierBtn").click(function(){
			//验证
			if($("#courierForm").form("validate")) {
				$("#courierForm").submit();
			} else {
				$.messager.alert('警告','保单中存在非法数据！','waring');
			}
			
		});

	});

	function doDblClickRow() {
		alert("双击表格数据...");
		$('#association_subarea').datagrid({
			fit : true,
			border : true,
			rownumbers : true,
			striped : true,
			url : "../../data/sub_area.json",
			columns : [ [ {
				field : 'id',
				title : '分拣编号',
				width : 120,
				align : 'center'
			}, {
				field : 'province',
				title : '省',
				width : 120,
				align : 'center',
				formatter : function(data, row, index) {
					if (row.area != null) {
						return row.area.province;
					}
					return "";
				}
			}, {
				field : 'city',
				title : '市',
				width : 120,
				align : 'center',
				formatter : function(data, row, index) {
					if (row.area != null) {
						return row.area.city;
					}
					return "";
				}
			}, {
				field : 'district',
				title : '区',
				width : 120,
				align : 'center',
				formatter : function(data, row, index) {
					if (row.area != null) {
						return row.area.district;
					}
					return "";
				}
			}, {
				field : 'keyWords',
				title : '关键字',
				width : 120,
				align : 'center'
			}, {
				field : 'startnum',
				title : '起始号',
				width : 100,
				align : 'center'
			}, {
				field : 'endnum',
				title : '终止号',
				width : 100,
				align : 'center'
			}, {
				field : 'single',
				title : '单双号',
				width : 100,
				align : 'center'
			}, {
				field : 'assistKeyWords',
				title : '辅助关键字',
				width : 100,
				align : 'center'
			} ] ]
		});
		$('#association_customer').datagrid({
			fit : true,
			border : true,
			rownumbers : true,
			striped : true,
			url : "../../data/association_customer.json",
			columns : [ [ {
				field : 'id',
				title : '客户编号',
				width : 120,
				align : 'center'
			}, {
				field : 'name',
				title : '客户名称',
				width : 120,
				align : 'center'
			}, {
				field : 'company',
				title : '所属单位',
				width : 120,
				align : 'center'
			} ] ]
		});
		$('#association_courier').datagrid({
			fit : true,
			border : true,
			rownumbers : true,
			striped : true,
			url : "../../data/courier.json",
			columns : [ [ {
				field : 'id',
				title : '编号',
				width : 120,
				align : 'center'
			}, {
				field : 'courierNum',
				title : '快递员工号',
				width : 120,
				align : 'center'
			}, {
				field : 'name',
				title : '快递员姓名',
				width : 120,
				align : 'center'
			}, {
				field : 'standard.name',
				title : '收派标准',
				width : 120,
				align : 'center',
				formatter : function(value, row, index) {
					if (row.standard != null) {
						return row.standard.name;
					}
					return null;
				}
			}, {
				field : 'taketime.name',
				title : '收派时间',
				width : 120,
				align : 'center',
				formatter : function(value, row, index) {
					if (row.taketime != null) {
						return row.taketime.name;
					}
					return null;
				}
			}, {
				field : 'company',
				title : '所属单位',
				width : 120,
				align : 'center'
			} ] ]
		});
	}
</script>
</head>

<body class="easyui-layout" style="visibility: hidden;">
	<div region="center" border="false">
		<table id="grid"></table>
	</div>
	<div region="south" border="false" style="height: 150px">
		<div id="tabs" fit="true" class="easyui-tabs">
			<div title="关联快递员" id="courier"
				style="width: 100%; height: 100%; overflow: hidden">
				<table id="association_courier"></table>
			</div>
			<div title="关联分区" id="subArea"
				style="width: 100%; height: 100%; overflow: hidden">
				<table id="association_subarea"></table>
			</div>
			<div title="关联客户" id="customers"
				style="width: 100%; height: 100%; overflow: hidden">
				<table id="association_customer"></table>
			</div>
		</div>
	</div>

	<!-- 添加 修改分区 -->
	<div class="easyui-window" title="定区添加修改" id="addWindow"
		collapsible="false" minimizable="false" maximizable="false"
		style="top: 20px; left: 200px">
		<div style="height: 31px; overflow: hidden;" split="false"
			border="false">
			<div class="datagrid-toolbar">
				<a id="save" icon="icon-save" href="javascript:void(0);" class="easyui-linkbutton"
					plain="true">保存</a>
			</div>
		</div>

		<div style="overflow: auto; padding: 5px;" border="false">
			<form id="fixedAreaForm" method="post" action="../../fixedArea_save.action">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">定区信息</td>
					</tr>
					<tr>
						<td>定区编码</td>
						<td>
						<input type="text" name="id" class="easyui-validatebox"
							required="true" /></td>
					</tr>
					<tr>
						<td>定区名称</td>
						<td><input type="text" name="fixedAreaName" class="easyui-validatebox"
							required="true" /></td>
					</tr>
					<tr>
						<td>负责人</td>
						<td><input name="fixedAreaLeader" class="easyui-validatebox"
							required="true" /></td>
					</tr>
					<tr>
						<td>联系电话</td>
						<td><input name="telephone" class="easyui-validatebox"
							required="true" /></td>
					</tr>
					<tr>
						<td>所属公司</td>
						<td><input name="company" class="easyui-validatebox"
							required="true" /></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<!-- 查询定区 -->
	<div class="easyui-window" title="查询定区窗口" id="searchWindow"
		collapsible="false" minimizable="false" maximizable="false"
		style="top: 20px; left: 200px">
		<div style="overflow: auto; padding: 5px;" border="false">
			<form id="searchFixedAreaForm">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">查询条件</td>
					</tr>
					<tr>
						<td>定区编码</td>
						<td><input type="text" name="id" class="easyui-validatebox"
							required="true" /></td>
					</tr>
					<tr>
						<td>所属单位</td>
						<td><input type="text" name="company"
							class="easyui-validatebox" required="true" /></td>
					</tr>
					<tr>
						<td>分区</td>
						<td><input type="text" name="subareaName"
							class="easyui-validatebox" required="true" /></td>
					</tr>
					<tr>
						<td colspan="2"><a id="btn" href="#"
							class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<!-- 关联客户窗口 -->
	<div class="easyui-window" modal=true title="关联客户窗口"
		id="customerWindow" collapsible="false" closed="true"
		minimizable="false" maximizable="false"
		style="top: 20px; left: 200px; width: 600px; height: 300px;">
		<div style="overflow: auto; padding: 5px;" border="false">
			<form id="customerForm"
				action="../../fixedArea_associationCustomerToFixedArea.action"
				method="post">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="3">关联客户</td>
					</tr>
					<tr>
						<td>
						<input type="hidden" name="id" id="customerFixedAreaId" />
							未关联定区客户列表 <br />
						<select id="noassociationSelect"
							multiple="multiple" size="10" style="width: 200px;"></select></td>
						<td>
						<input type="button" value="》》" id="toRight"> <br />
							<input type="button" value="《《" id="toLeft"></td>
						<td>已关联定区客户列表 <br />
						<select id="associationSelect"
							name="customerIds" multiple="multiple" size="10"
							style="width: 200px;"></select>
						</td>
					</tr>
					<tr>
						<td colspan="3">
					<a id="associationBtn" href="#"
							class="easyui-linkbutton" data-options="iconCls:'icon-save'">关联客户</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<!-- 关联快递员窗口 -->
	<div class="easyui-window" title="关联快递员窗口" id="courierWindow"
		modal="true" collapsible="false" closed="true" minimizable="false"
		maximizable="false"
		style="top: 20px; left: 200px; width: 700px; height: 300px;">
		<div style="overflow: auto; padding: 5px;" border="false">
			<form id="courierForm"
				action="../../fixedArea_associationCourierToFixedArea.action"
				method="post">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">关联快递员</td>
					</tr>
					<tr>
						<td>选择快递员</td>
						<td>
							<!-- 存放定区编号 -->
							<input type="hidden" name="id" id="courierFixedAreaId" />
							
							<input type="text" name="courierId" class="easyui-combobox" required="true" 
							data-options="url:'../../courier_findNoAssociation.action',
											valueField:'id',
											textField:'info'"/>
						</td>
					</tr>
					<tr>
						<td>选择收派时间</td>
						<td>
						<input type="text" name="takeTimeId" class="easyui-combobox" required="true" 
							data-options="url:'../../taketime_findAll.action',
								textField:'name',
								valueField:'id'
								"/>
						</td>
					</tr>
					<tr>
						<td colspan="3"><a id="associationCourierBtn" href="#"
							class="easyui-linkbutton" data-options="iconCls:'icon-save'">关联快递员</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>

</html>